@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;
    background-color: #000000;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    margin: 0;
    min-height: 100vh;
    background-color: #000000;
  }

  * {
    box-sizing: border-box;
  }
}

@layer components {
  /* Apple-style button base */
  .btn-apple {
    @apply inline-flex items-center justify-center rounded-lg px-6 py-3 text-base font-medium transition-all duration-200 ease-out;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/20 focus:ring-offset-2 focus:ring-offset-background;
  }

  .btn-primary {
    @apply btn-apple bg-primary text-white hover:bg-primary-dark;
    @apply shadow-sm hover:shadow-md;
  }

  .btn-secondary {
    @apply btn-apple bg-background-secondary text-foreground border border-border;
    @apply hover:bg-background-tertiary hover:border-border-secondary;
  }

  /* Apple-style card */
  .card-apple {
    background-color: #1C1C1E;
    border: 1px solid #38383A;
    border-radius: 0.75rem;
    padding: 1.5rem;
    backdrop-filter: blur(8px);
  }

  /* Apple-style text hierarchy */
  .text-hero {
    @apply text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight;
  }

  .text-headline {
    @apply text-3xl md:text-4xl lg:text-5xl font-semibold tracking-tight;
  }

  .text-subheadline {
    @apply text-xl md:text-2xl lg:text-3xl font-medium;
  }

  .text-body-large {
    @apply text-lg md:text-xl leading-relaxed;
  }

  .text-body {
    @apply text-base leading-relaxed;
  }

  .text-caption {
    @apply text-sm text-foreground-secondary;
  }
}

/* Leptos-specific */
leptos-island {
  display: contents;
}

/* Code syntax highlighting - Apple-inspired */
.code-block {
  @apply bg-background-secondary border border-border rounded-lg p-4 font-mono text-sm;
  @apply overflow-x-auto;
}

.code-block .language-tag {
  display: none;
}

.code-block .code-block-inner {
  font-family: 'SF Mono', 'Fira Code', Menlo, Monaco, monospace;
  font-style: normal;
}

pre i {
  font-style: normal;
}

/* Code syntax colors - Apple-inspired */
.hh1 { color: #FF6B6B; } /* attribute */
.hh2 { color: #4ECDC4; } /* constant */
.hh3 { color: #FFFFFF; } /* function.builtin */
.hh4 { color: #FFFFFF; } /* function */
.hh5 { color: #4ECDC4; } /* keyword */
.hh6 { color: #C7C7CC; } /* operator */
.hh7 { color: #4ECDC4; } /* property */
.hh8 { color: #FFFFFF; } /* punctuation */
.hh9 { color: #FFFFFF; } /* punctuation.bracket */
.hh10 { color: #FFFFFF; } /* punctuation.delimiter */
.hh11 { color: #FFFFFF; } /* string */
.hh12 { color: #FFFFFF; } /* string.special */
.hh13 { color: #FFFFFF; } /* tag */
.hh14 { color: #C7C7CC; } /* type */
.hh15 { color: #C7C7CC; } /* type.builtin */
.hh16 { color: #4ECDC4; } /* variable */
.hh17 { color: #4ECDC4; } /* variable.builtin */
.hh18 { color: #AEAEB2; } /* variable.parameter */
.hh19 { color: #8E8E93; } /* comment */
.hh20 { color: #C7C7CC; } /* macro */
.hh21 { color: #C7C7CC; } /* label */

